<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  const centerImageUrl = '../../public/pageB_logo.png';
  const bgImageUrl = '../../public/pageB_bg.jpg';
  // 轮播图数据
  const imgList = ref([
    { url: '../../public/pageB_lun1.png', name: '学校携52项科技成果亮相第63届高等教育博览会', time: '2025-06-01' },
    {
      url: '../../public/pageB_lun2.jpg',
      name: '我校承办第五届全国物理“金牌联盟”学校教育研讨会暨拔尖创新人才培养论坛',
      time: '2025-05-13',
    },
    {
      url: '../../public/pageB_lun3.jpg',
      name: '我校承办《中华人民共和国学位法》实施核心问题第三次研讨会',
      time: '2025-06-18',
    },
  ]);

  // 右侧内容数据
  const rightItems = ref([
    {
      url: '../../public/pageB_note1.jpg',
      name: '音乐学院举办大型原创音乐剧《江格尔》首演活动',
      time: '2025-06-18',
      inner:
        '5月30日，音乐学院大型原创音乐剧《江格尔》在净月大街校区音乐厅首演。音乐剧《江格尔》由音乐学院出品，师生共同创作，多名音乐与舞蹈专业学生深度协作，以中国三大民族史诗之一《江格尔》为创作蓝本，融...',
    },
    {
      url: '../../public/pageB_note2.png',
      name: '我校举办第二届“弘扬爱国情，奋进新时代” 主题书画展',
      time: '2025-06-02',
      inner:
        '5月29日，由美术学院与学生处、研究生院、离退休工作处、校团委、图书馆共同举办的第二届“弘扬爱国情，奋进新时代”主题书画展，在人民大街校...',
    },
    {
      url: '../../public/pageB_note3.jpg',
      name: '学校举行“同心跟党走 奋进新征程”统一战线文艺晚会',
      time: '2025-05-31',
      inner:
        '5月27日，由学校党委统战部主办、少数民族教职工联谊会承办的“同心跟党走 奋进新征程”统一战线文艺晚会在人民大街校区音乐厅举行。学校党委副...',
    },
  ]);

  const imgIndex = ref(0);

  // 按钮切换下一个
  const nextSlide = () => {
    imgIndex.value = (imgIndex.value + 1) % imgList.value.length;
    stopAutoPlay();
    startAutoPlay();
  };

  // 按钮切换上一个
  const prevSlide = () => {
    imgIndex.value = (imgIndex.value - 1 + imgList.value.length) % imgList.value.length;
    stopAutoPlay();
    startAutoPlay();
  };

  // 去到指定
  const goToSlide = index => {
    imgIndex.value = index;
    stopAutoPlay();
    startAutoPlay();
  };

  let autoPlayTimer = null;
  const startAutoPlay = () => {
    autoPlayTimer = setInterval(nextSlide, 5000);
  };

  const stopAutoPlay = () => {
    if (autoPlayTimer) {
      clearInterval(autoPlayTimer);
    }
  };

  onMounted(() => {
    startAutoPlay();
  });

  onBeforeUnmount(() => {
    stopAutoPlay();
  });
</script>

<template>
  <div class="main">
    <img class="background-image" :src="bgImageUrl"></img>
    <div class="content-wrapper">
      <!-- 顶部中央图片 -->
      <div class="center-image-container">
        <img :src="centerImageUrl" class="center-image" />
      </div>

      <div style="width: 100%; height: 70%">
        <div style="width: 40%; height: 100%; display: inline-block; vertical-align: top">
          <div style="width: 100%; height: 70%; position: relative; vertical-align: top">
            <div
              v-for="(img, index) in imgList"
              :key="index"
              class="carousel-slide"
              :class="{ active: imgIndex === index }"
            >
              <img :src="img.url" />
            </div>
            <button class="carousel-control prev" @click="prevSlide">❮</button>
            <button class="carousel-control next" @click="nextSlide">❯</button>
          </div>
          <div
            style="
              width: 100%;
              height: 8%;
              background-color: rgb(18, 97, 176);
              position: relative;
              font-size: 0.6rem;
              color: #fff;
              padding: 0px 10px;
              padding-top: 10px;
            "
          >
            <div style="width: 70%; height: 100%; display: inline-block">|要闻速递|</div>
            <div style="width: 30%; height: 100%; display: inline-block; text-align: right">
              {{ imgList[imgIndex].time }}
            </div>
          </div>
          <div style="width: 100%; height: 22%; background-color: rgb(18, 97, 176); position: relative">
            <div
              style="
                position: absolute;
                font-size: 1rem;
                padding: 10px;
                color: #fff;
                flex: 1;
                overflow: visible;
                white-space: normal;
                font-weight: bold;
                pointer-events: none;
              "
            >
              {{ imgList[imgIndex].name }}
            </div>
          </div>
        </div>
        <div style="width: 5%; height: 100%; display: inline-block"></div>
        <div style="width: 55%; height: 100%; display: inline-block; vertical-align: top">
          <div
            v-for="(item, index) in rightItems"
            style="width: 100%; height: 33%; border-bottom: 1px solid rgba(200, 200, 200, 0.5); padding: 10px"
          >
            <div style="width: 33%; height: 100%; display: inline-block">
              <img style="width: 100%; height: 100%; object-fit: cover" :src="item.url" />
            </div>

            <div style="width: 67%; height: 100%; display: inline-block; vertical-align: top; padding: 10px">
              <div style="width: 100%; height: 20%; font-size: 0.6rem">
                <div style="width: 50%; height: 100%; display: inline-block; color: red">|要闻速递|</div>
                <div style="width: 50%; height: 100%; display: inline-block; color: grey; text-align: right">
                  {{ item.time }}
                </div>
              </div>
              <div style="width: 100%; height: 20%; display: inline-block; font-size: 0.7rem; font-weight: bold">
                {{ item.name }}
              </div>
              <div
                style="
                  width: 100%;
                  height: 60%;
                  display: inline-block;
                  overflow: hidden;
                  font-size: 0.6rem;
                  color: grey;
                "
              >
                {{ item.inner }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: absolute; right: 180px; bottom: 50px; font-size: 10px; cursor: pointer; color: gray">
      {{ '查看更多  >' }}
    </div>
  </div>
</template>

<style scoped>
  .main {
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: -1;
  }

  .content-wrapper {
    width: 100%;
    height: 100%;
    padding: 60px 160px;
    box-sizing: border-box;
  }

  .center-image-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 10px;
  }

  .center-image {
    width: 10vw;
    height: 10vh;
    object-fit: contain;
  }

  .right-section {
    flex: 1;
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
    overflow-y: auto;
  }

  .right-item {
    padding: 15px 0;
  }

  .item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item-content img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
  }

  .item-content h3 {
    margin: 5px 0;
  }

  .item-content .date {
    color: #666;
    font-size: 0.9em;
  }

  hr {
    border: none;
    height: 1px;
    background-color: #ddd;
    margin: 10px 0;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .carousel-slide.active {
    opacity: 1;
  }

  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: transparent;
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 26px;
    width: 30px;
    height: 100px;

    transition: 0.3s;
  }

  .carousel-control:hover {
    color: white;
  }

  .prev {
    left: 20px;
  }

  .next {
    right: 20px;
  }
</style>
